<!doctype html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="{{PluginResources}}/html/user/dailyData.css" />
    <link rel="preload" href="{{PluginResources}}/html/fonts/MiSans-Regular.ttf" as="font" />
</head>

<body id="body">
    <div id="account">
        <div id="user-name">{{gameData.roleName}}</div>
        <div id="user-uid">{{gameData.roleId}}</div>
    </div>
    <div id="data">
        <div id="stamina">{{gameData.energyData.cur}}/{{gameData.energyData.total}}</div>
        <div id="activity">{{gameData.livenessData.cur}}/{{gameData.livenessData.total}}</div>
        <div id="experience">{{gameData.battlePassData[1].cur}}/{{gameData.battlePassData[1].total}}</div>
        <div id="level">LV.{{gameData.battlePassData[0].cur}}</div>
        <div id="progress" style="background: linear-gradient(90deg, #b9a068 0%, #c8c5bc 0%);"></div>
    </div>

    <div id="curExp" style="display: none;">{{gameData.battlePassData[1].cur}}</div>
    <div id="totalExp" style="display: none;">{{gameData.battlePassData[1].total}}</div>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const curExp = parseInt(document.getElementById('curExp').innerText);
            const totalExp = parseInt(document.getElementById('totalExp').innerText);
            const pct = (curExp / totalExp) * 100;
            const progressEl = document.getElementById('progress');
            progressEl.style.background = `linear-gradient(90deg, #b9a068 ${pct}%, #c8c5bc ${pct}%`;
        });
    </script>
</body>

</html>